<%@page import="com.swt.mto.thithu.service.LoadAjaxLocalServiceUtil"%>
<%@page import="com.swt.mto.thithu.service.AnswerLocalServiceUtil"%>
<%@page import="com.swt.mto.thithu.model.Answer"%>
<%@page import="com.liferay.portal.kernel.util.UnicodeFormatter"%>
<%@ include file="/init.jsp"%>
        
  <portlet:actionURL var="addQuestionURL" name="redirectAdd"/>
<%--   <portlet:renderURL var="createQuestion">
		<portlet:param name="jspPage" value="/html/quanlycauhoi/createQuestion.jsp"/>
</portlet:renderURL> --%>

<script type="text/javascript">
 	function <portlet:namespace />initEditor() {
    //if you dont wnat the default text you can remove.        
    	return '<font style="font-weight: bold">scott was here</font>';
    }

    function <portlet:namespace />extractCodeFromEditor() {
       	var x = document.<portlet:namespace />fm.<portlet:namespace />htmlCodeFromEditorPlacedHere.value = window.<portlet:namespace />editor.getHTML();
    }
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	
	$(document).ready(function() {	
		//create question
		function addQuesiont(){
			$("#SCORMEditText").click(function(){
				$("#SCORMQuestionTextView").append($("form#frQuestion").css("display", "inline"));
			});
		}
		
		//add answer client side
		var n=1;
		var answerId=0;
		
		//aswer tang tu dong.
		$.ajax({
			type : "POST",
			datatype: "json",
			url : "<portlet:resourceURL id='getAnswerId'/>",
			success: function(data){
				answerId = data.id;
			}
		});
		
		//Button cancel
		$("#questionbankCancelUpdate, #questionbankCancelUpdateBottom").click(function(){
			//cancel when edit category
			var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']"); /*click current*/
			if(clicked.parent().attr("id").indexOf("c") != -1 ){ /*is category*/
				//show view category
				$("#ItemView").html(categoryView(clicked.text()));
				//show button when edit category
				categoryViewbtn();
				
			//cancel khi dang edit quiz
			}else if(clicked.parent().attr("id").indexOf("b") != -1 ){ /*is quiz*/
				//Title, Time, Description get from input hidden and tag a
				var title = clicked.text();
				var time = clicked.next().val();
				var description = clicked.next().next().val();
				//show view quiz with title, time and description
				$("#ItemView").html(quizView(title,time,description));
				//show buttion when edit quiz
				QuizViewbtn();
			//Cancel khi dang edit cau hoi
			}else{
				//Title, Description get from input hidden and tag a
				var title = clicked.text();
				var description = clicked.next().val();
				//show view question with title, Description
				$("#ItemView").html(QuestionView(title,description));
				//show button when edit question
				getAnswers(clicked.parent().attr("id").replace("q",""));
				QuestionViewbtn();
				n=1;
			}
			//answer tang tu dong
			$.ajax({
				type : "POST",
				datatype: "json",
				url : "<portlet:resourceURL id='getAnswerId'/>",
				success: function(data){
					answerId = data.id;
				}
			});
		});
		
		//button save
		$("#questionbankUpdate, #questionbankUpdateBottom").click(function(){
			var urlId = "";
			var title ="";
			var quizCategoryId ="";
			var quizId="";
			var questionId ="";
			var time = "";
			var description ="";
			var answer = "";
			var answerPosition="";
			var answerType = "";
			
			var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
			// when click is category
			if(clicked.parent().attr("id").indexOf("c") != -1 ){ /* is category */
				// url for ajax to update category
				urlId = "<portlet:resourceURL id='update-quiz-catalogy'/>";
				// title and CategoryId for data ajax update category
				title = $("#SCORMCategoryNameEdit").val();
				quizCategoryId = clicked.parent().attr("id");				
			//when click  is quiz
			}else if(clicked.parent().attr("id").indexOf("b") != -1 ){ /* is quiz */
				// url for ajax to update quiz
				urlId = "<portlet:resourceURL id='update-quiz'/>";
				// title, time, and description, quizId for data ajax to update quiz
				title = $("#SCORMQuizNameEdit").val();
				time = $("#SCORMQuizTime").val();
				description = $("#SCORMQuizDescription").val();
				quizId = clicked.parent().attr("id");
			//when click is question
			}else{
				//url for ajax to update question
				urlId = "<portlet:resourceURL id='update-question'/>";
				//Title, description for data ajax to update question
				title = $("#SCORMQuestionTitleEdit").val();
				description = $("#SCORMQuestionTextView").val();
				questionId = clicked.parent().attr("id");
				
				answerType = $("#SCORMQuestionType").val();
				//string answerIds (id1.id2.id3 v.v)
				var position = 1;
				for(var i=0; i < n-1; i++){
					if($("#SCORMQuestionAnswersEditors ."+(i+1)).attr("id")!= null){
						answer+= $("#SCORMQuestionAnswersEditors ."+(i+1)).attr("id") + ".";
						answerPosition+= position + ".";
						position ++;
					}
				} 
			}
			//ajax process update quiz, category and question
			$.ajax({
				type : "POST",
				datatype : "json",
				url : urlId,
				data: {"quizCategoryId": quizCategoryId,
					  	"quizId":quizId,
					  	"questionId":questionId,
						"title": title,
						"time": time,
						"answer":answer,
						"description" : description,
						"answerType": answerType,
						"answerPosition":answerPosition},
				success: function(data){
					// Icon click close/open category and quiz
					var str = "<ins class='jstree-icon'>&nbsp;</ins>";
					// add title after Icon
					str+= data.title.trim();
					
					/* process update category success */
					if(data.test !="yes"){
						//update Icon + title for tree
						$("#c" + data.id).children("a").html(str);
						//Update view category with title
						$("#ItemView").html(categoryView(data.title));
						//Show button when view category
						categoryViewbtn();
						
					/* process update quiz success */
					}else if(data.entry != "question"){
						//update Icon + title for tree
						$("#b" + data.id).children("a").html(str);
						//Update view category with title, time, description
						$("#ItemView").html(quizView(data.title, data.time, data.description));
						//Show button when view quiz
						QuizViewbtn();
						// add time and description into input hidden
						$("#b" + data.id).children("a").next().val(data.time);
						$("#b" + data.id).children("a").next().next().val(data.description);
						
					/* process update question success */
					}else{
						//update Icon + title for tree
						$("#q" + data.id).children("a").html(str);
						//Update view category with title, description
						$("#ItemView").html(QuestionView(data.title, data.description));
						//show button when view question
						QuestionViewbtn();
						// add description into input hidden
						$("#q" + data.id).children("a").next().val(data.description);
						getAnswers(data.id);
						n=1;
					}
					
					//ajax save tree
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
					
					//ajax get answerId tu dong tang
					$.ajax({
						type : "POST",
						datatype: "json",
						url : "<portlet:resourceURL id='getAnswerId'/>",
						success: function(data){
							answerId = data.id;
						}
					});
				},
				error: function(){
					alert("error");
				}
			});
		});
		
		//button edit
		$("#questionbankEdit, #questionbankEditBottom").click(function(){
			
			var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
			//process edit when view category
			if(clicked.parent().attr("id").indexOf("c") != -1 ){ 
				//show edit view category with title from tree click
				$("#ItemView").html(categoryEditView(clicked.text()));
				//show button when edit(save, cancel)
				editbtn();
			
			//process edit when view quiz
			}else if(clicked.parent().attr("id").indexOf("b") != -1 ){
				//get title, time, description from input hidden
				var title = clicked.text();
				var time = clicked.next().val();
				var description = clicked.next().next().val();
				// show edit view quiz whit title, time and description
				$("#ItemView").html(QuizEditView(title,time,description));
				//show button when edit(save, cancel)
				editbtn();
				
			//process edit when view question
			}else{
				
				//get title, description from input hidden
				var title = clicked.text();
				var description = clicked.next().val();
				// show edit view question with title and description
				$("#ItemView").html(QuestionEditView(title,description));
				//show button when edit(save, cancel)
				getEditAnswers(clicked.parent().attr("id").replace("q",""));
				
				editbtn();
				
				$.ajax({
					type : "POST",
					datatype: "json",
					url : "<portlet:resourceURL id='getAnswerId'/>",
					success: function(data){
						answerId = data.id;
					}
				});
				// click add answer to create new answer
				AddAnswer();
			}
			addQuesiont();
		});
		
		//button remove
	 	$("#questionbankRemoveElement, #questionbankRemoveElementBottom").click(function(){
	 		var jstreeLast = $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("class").indexOf("jstree-last");
	 		var urlId ="";
	 		var quizCategoryId="";
	 		var quizId="";
	 		var questionId="";
	 		var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
	 		
	 		// remove when click is view category
	 		if(clicked.parent().attr("id").indexOf("c") != -1 ){
	 			// url for ajax to remove category
	 			urlId = "<portlet:resourceURL id='remove-quiz-catalogy'/>";
	 			// categoryId need remove
	 			quizCategoryId = clicked.parent().attr("id");
	 			
	 		// remove when click is view quiz
	 		}else if($("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id").indexOf("b") != -1){
	 			// url for ajax to remove quiz
	 			urlId = "<portlet:resourceURL id='remove-quiz'/>";
	 			// quizId need remove
	 			quizId = $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id");
	 			
	 		// remove  when click is view question
	 		}else{
	 			// url for ajax to remove question
	 			urlId = "<portlet:resourceURL id='remove-question'/>";
	 			// questionId need remove
	 			questionId = $("#SCORMQuestionBankTree a[class='jstree-clicked']").parent().attr("id");
	 		}
	 		
	 		// ajax process remove category, quiz, question
			$.ajax({
				type : "POST",
				datatype : "json",
				url : urlId,
				data: {"quizCategoryId":quizCategoryId, 
						"quizId":quizId,
						"questionId":questionId },
				success: function(data){
					// if remove khong nam sat phia duoi parent of its
					if($("#" + data.id).prev("li").html()!=null){
						// remove is jstreeLass
						if(jstreeLast !=-1){
							//add class jstree-last for tree above
							$("#" + data.id).prev("li").addClass("jstree-last");
						}
						// //add class jstree-clicked for tree above
						$("#" + data.id).prev("li").children("a").addClass("jstree-clicked");
						
					// if remove nam sat phia duoi parent of its
					}else{
						// remove is jstreeLass
						if(jstreeLast !=-1){
							//add class jstree-last for parent of its
							$("#" + data.id).parent("li").addClass("jstree-last");
						}
						// add class jstree-clicked for parent of its
						$("#" + data.id).parent().parent().children("a").addClass("jstree-clicked");
					}
					// remove its
					$("#"+data.id).remove();
					
					// if remove is category then
					if(data.test!="yes" || $("#" + data.id).prev("li").html()==null){
						// update category view 
						$("#ItemView").html(categoryView(clicked.text()));
						
					// if remove is quiz then
					}else if(data.entry !="question"){
						// get title, time, description from input hidden
						var title = clicked.text();
						var time = clicked.next().val();
						var description = clicked.next().next().val();
						// show quiz view with title, time, description
						$("#ItemView").html(quizView(title,time,description));
						// show button when view quiz
						QuizViewbtn();
						
					// if remove is question
					}else{
						// get title, description from input hidden
						var title = clicked.text();
						var description = clicked.next().next().val();
						// show question view with title and description
						$("#ItemView").html(QuestionView(title,description));
						// show button when view question
						QuestionViewbtn();
					}
					
					// ajax save tree when remove
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error: function(){
					alert("error");
				}
			});
		}); 
		
		//ajax load windows
		$.ajax({
			type: "GET",
			datatype: "html",
			url: "<portlet:resourceURL id='load'/>",
			success: function(data){
				// add tree when load web with html is saved in database
				$("#SCORMQuestionBankTree ul").html(data);
				// button at root
				rootbtn();
				// action for tree from category functiion
				category("c0");
			},
			error: function(){
				alert("error");
			}
		});
		

		//button add when view is category
		$("#questionbankAddCategory, #questionbankAddCategoryBottom").click(function() {
			var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
			if(clicked.parent() != null){
				// change jstree-close to jstree-open when add category
				if(clicked.parent().attr("class").indexOf("jstree-open") == -1){
					clicked.parent().removeClass("jstree-closed");
					clicked.parent().addClass("jstree-open");
				}
			}
			
			var parent;
			// ajax process add category
			$.ajax({
				type : "POST",
				datatype : "html",
				// url for and category
				url : "<portlet:resourceURL id='new-question-catalogy'/>",
				// data is parent Id for new category
				data: {"parentId": clicked.parent().attr("id")},
				success : function(data) {
					// remove jstree-clicked current
					clicked.removeClass("jstree-clicked");
					// data include: parentId!@#html!@#categoryId
					parent = data.split("!@#");
					//if parent haven't children then
					if($("#"+parent[0]).html().indexOf("ul")==-1){
						// add <ul> element
						$("#"+parent[0]).append("<ul></ul>");
						// append html into parent -> ul
						$("#"+parent[0]).children("ul").append(parent[1]);
					// parent have children
					}else{
						// remove jstree class of li have class parentId
						$("li."+parent[0]).removeClass("jstree-last");
						// append html into parent -> ul
						$("#"+parent[0]).children("ul").append(parent[1]);
					} 
					//show view category with "New Category"
					$("#ItemView").html(categoryEditView("New Category"));
					// add action for tree of categoryId
					category(parent[2]);
					//show button for edit(cancel, save)
					editbtn();
					// ajax save tree when add category
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error : function() {
					alert("error");
	
				}
			});
		});
		
		//button add when view is quiz
		$("#questionbankAddQuiz, #questionbankAddQuizBottom").click(function() {
			var clicked = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
			var quizCategoryId = "";
			if(clicked.parent() != null){
				// if click at category
				if (clicked.parent().attr("id").indexOf("c") != -1){
					// get CategoryId at click
					quizCategoryId = clicked.parent().attr("id");
					// change jstree-close to jstree-open with add quiz
					if(clicked.parent().attr("class").indexOf("jstree-open") == -1){
						clicked.parent().removeClass("jstree-closed");
						clicked.parent().addClass("jstree-open");
					}
				// if click at quiz
				}else{
					var quizId = clicked.parent();
					// get categoryId at parent of click
					quizCategoryId = quizId.parent().parent().attr("id");
				}
			}
			// ajax process add quiz
			$.ajax({
				type : "POST",
				datatype : "html",
				// url for add quiz
				url : "<portlet:resourceURL id='new-quiz'/>",
				// caterogyId for quiz
				data: {"parentId": quizCategoryId},
				success : function(data) {
					
					// remove jstree-clicked current
					clicked.removeClass("jstree-clicked");
					// data include: categoryId!@#html!@#quizId
					var parent = data.split("!@#");
					//if parent haven't children then
					if($("#"+parent[0]).html().indexOf("ul")==-1){
						$("#"+parent[0]).append("<ul></ul>");
						$("#"+parent[0]).children("ul").append(parent[1]);
					// parent have children
					}else{
						$("li."+parent[0]).removeClass("jstree-last");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}	
					
					//show view quiz with "New Quiz", time:0, description:""
					$("#ItemView").html(QuizEditView("New Quiz",0,""));
					//action for tree of quizId
					category(parent[2]);
					// show button for edit(cancle, save)
					editbtn();
					// ajax save Tree when add quiz
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error : function() {
					alert("error");
				}
			});
		});
		
		
		//button add when view is question
		$("#questionbankAddQuestions, #questionbankAddQuestionsBottom").click(function() {
			var quizId = "";
			var jstreeClick = $("#SCORMQuestionBankTree a[class='jstree-clicked']");/*click current*/
			if(jstreeClick.parent() != null){
				// if click at quiz then
				if (jstreeClick.parent().attr("id").indexOf("b") != -1){
					// get quizId for question at click
					quizId = jstreeClick.parent().attr("id");
					// change jstree-close to jstree-open with add question
					if(jstreeClick.parent().attr("class").indexOf("jstree-open") == -1){
						jstreeClick.parent().removeClass("jstree-closed");
						jstreeClick.parent().addClass("jstree-open");
					}
					// if click at quiz
				}else {
					// get categoryId at parent of click
					var quizQuestionId = jstreeClick.parent();
					quizId = quizQuestionId.parent().parent().attr("id");
				}
			}
			//ajax process add question
			$.ajax({
				type : "POST",
				datatype : "html",
				// url for add quiz
				url : "<portlet:resourceURL id='new-question'/>",
				// quizId for question
				data: {"parentId": quizId},
				success : function(data) {
					// remove jstree-clicked current
					jstreeClick.removeClass("jstree-clicked");
					// data include: quizId!@#html!@#QuestionId
					var parent = data.split("!@#");
					//if parent haven't children then
					if($("#"+parent[0]).html().indexOf("ul")==-1){
						$("#"+parent[0]).append("<ul></ul>");
						$("#"+parent[0]).children("ul").append(parent[1]);
					// parent have children
					}else{
						$("li."+parent[0]).removeClass("jstree-last");
						$("#"+parent[0]).children("ul").append(parent[1]);
					}	
					//show view quiz with "New Questioin", description:""
					$("#ItemView").html(QuestionEditView("New Question",""));
					
					//action for tree of questionId
					category(parent[2]); 
					//action for add answer
					AddAnswer();
					//show button for edit 
					editbtn();
					// ajax save tree when add question
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
				},
				error : function() {
					alert("error");
				}
			});
		});
		
		//List Function
		//jq change css tree and process event
		function category(id){
			// re chuot vao
			$("#" + id + " a").mouseenter(function() {
				$(this).addClass("jstree-hovered");
			});
			
			// re chuot ra
			$("#" + id + " a").mouseleave(function() {
				$(this).removeClass("jstree-hovered");
			});

			// click vao
			$("#" + id + " a").click(function() {
					// remove and add jstree-clicked
					$("#SCORMQuestionBankTree a").removeClass("jstree-clicked");
					$(this).addClass("jstree-clicked");
					// if current is root
					if($(this).parent().html() == $("li#c0").html()){
						$("#ItemView").html("<b>Question base</b>");
						rootbtn();
						
					// if current is category
					}else if($(this).parent().attr("id").indexOf("c")!=-1){
						$("#ItemView").html(categoryView($(this).text()));
						categoryViewbtn();
						
					// if current is quiz
					}else if($(this).parent().attr("id").indexOf("b")!=-1){
						// get title, time, description from input hidden and tag a
						var title = $(this).text();
						var time = $(this).next().val();
						var description = $(this).next().next().val();
						// show view quiz with title, time, description
						$("#ItemView").html(quizView(title,time,description));
						QuizViewbtn();
						
					// if current is question
					}else{
						// get title, description from input hidden and tag a
						var title = $(this).text();
						var description = $(this).next().val();
						// show view question with title and description
						$("#ItemView").html(QuestionView(title,description));
						// getAnswers view with questionId
						$.ajax({
							type : "POST",
							datatype: "json",
							url : "<portlet:resourceURL id='getAnswerId'/>",
							success: function(data){
								answerId = data.id;
							}
						});
						getAnswers($(this).parent().attr("id").replace("q",""));
						QuestionViewbtn();
						n=1;
					}
					
					//aswer tang tu dong.
					$.ajax({
						type : "POST",
						datatype: "json",
						url : "<portlet:resourceURL id='getAnswerId'/>",
						success: function(data){
							answerId = data.id;
						}
					});
			});
			
			// click vao open/close tree
			$("#" + id + " ins").click(function() {
					// if click is jstree-open
					if($(this).parent("li").attr("class").indexOf("jstree-open") != -1){
						// change jstree-open to jstree-close
						$(this).parent("li").removeClass("jstree-open");
						// remove all jstree-clicked children
						$(this).parent("li").find("a").removeClass("jstree-clicked");
						// if haven't jstree-click form tree 
						if($("#SCORMQuestionBankTree").html().indexOf("jstree-clicked") == -1 ){
							//show root
							rootbtn();
							$("#ItemView").html("<p>Question Base</p>");
						}
						$(this).parent("li").addClass("jstree-closed");
					// if click is jstree-close
					}else{
						// change jstree-close to jstree-open
						$(this).parent("li").removeClass("jstree-closed");
						$(this).parent("li").addClass("jstree-open");
					}
					// ajax save tree when click open/close tree
					$.ajax({
						type : "POST",
						url : "<portlet:resourceURL id='saveTree'/>",
						data: {"saveTreePara": $("#SCORMQuestionBankTree").children("ul").html()}
					});
			});
		}
		
		function AddAnswer(){
			$("#SCORMButtonAddAnswer").click(function(){
				$("#SCORMQuestionAnswersEditors").append(ChoiceAnswerEditView("view"+ answerId,n));
				RemoveAnswer("view"+ answerId);
				answerId++;
				n++;
			});
		}
		
		// ajax get answers for questionId
		function getAnswers(questionId){
			$.ajax({
				type : "POST",
				datatype: "json",
				data:{"questionId":questionId},
				url : "<portlet:resourceURL id='getListAnswer'/>",
				success: function(data){
					var answerids = data.answerIds.split(".");
					for ( var i = 0; i< answerids.length-1; i++){
						answerId=answerids[i];
						$("#SCORMQuestionAnswersEditors").append(choiceAnswerView("view"+ answerId,n));
						RemoveAnswer("view"+ answerId);
						n++;
					}
				}
			});
		}
		
		// ajax get edit answers for questionId
		function getEditAnswers(questionId){
			$.ajax({
				type : "POST",
				datatype: "json",
				data:{"questionId":questionId},
				url : "<portlet:resourceURL id='getListAnswer'/>",
				success: function(data){
					var answerids = data.answerIds.split(".");
					for ( var i = 0; i< answerids.length-1; i++){
						answerId=answerids[i];
						$("#SCORMQuestionAnswersEditors").append(ChoiceAnswerEditView("view"+ answerId,n));
						RemoveAnswer("view"+ answerId);
						n++;
					}
				}
			});
		}
		
		function RemoveAnswer(id){
			$("#"+id).children().children().children().next().children("#SCORMAnswerRemove").click(function(){
				$("#"+id).remove();
			});
		}
		
		// status button
		function categoryViewbtn(){ //edit, add cate, add quiz, remove
			$("#quizContentBottomMenu").show();
	        $("#questionbankUpdateBottom").hide();
	        $("#questionbankCancelUpdateBottom").hide();
	        $("#questionbankEditBottom").show();
	        $("#questionbankAddCategoryBottom").show();
	        $("#questionbankAddQuestionsBottom").hide();
            $("#questionbankAddQuizBottom").show();
	        $("#questionbankRemoveElementBottom").show();

	        $("#questionbankUpdate").hide();
	        $("#questionbankCancelUpdate").hide();
	        $("#questionbankEdit").show();
	        $("#questionbankAddCategory").show();
	        $("#questionbankAddQuestions").hide();
            $("#questionbankAddQuiz").show();
	        $("#questionbankRemoveElement").show();
		}
		
		function QuizViewbtn(){ //edit, add quiz, add question, remove
			$("#quizContentBottomMenu").show();
	        $("#questionbankUpdateBottom").hide();
	        $("#questionbankCancelUpdateBottom").hide();
	        $("#questionbankEditBottom").show();
	        $("#questionbankAddCategoryBottom").hide();
	        $("#questionbankAddQuestionsBottom").show();
            $("#questionbankAddQuizBottom").show();
	        $("#questionbankRemoveElementBottom").show();

	        $("#questionbankUpdate").hide();
	        $("#questionbankCancelUpdate").hide();
	        $("#questionbankEdit").show();
	        $("#questionbankAddCategory").hide();
	        $("#questionbankAddQuestions").show();
            $("#questionbankAddQuiz").show();
	        $("#questionbankRemoveElement").show();
		}
		
		function QuestionViewbtn(){ //edit, add question, remove
			$("#quizContentBottomMenu").show();
	        $("#questionbankUpdateBottom").hide();
	        $("#questionbankCancelUpdateBottom").hide();
	        $("#questionbankEditBottom").show();
	        $("#questionbankAddCategoryBottom").hide();
	        $("#questionbankAddQuestionsBottom").show();
            $("#questionbankAddQuizBottom").hide();
	        $("#questionbankRemoveElementBottom").show();

	        $("#questionbankUpdate").hide();
	        $("#questionbankCancelUpdate").hide();
	        $("#questionbankEdit").show();
	        $("#questionbankAddCategory").hide();
	        $("#questionbankAddQuestions").show();
            $("#questionbankAddQuiz").hide();
	        $("#questionbankRemoveElement").show();
		}
		
		
		
		function rootbtn(){ // top add cate, add ques
			 $("#quizContentBottomMenu").hide();
             $("#questionbankUpdate").hide();
             $("#questionbankCancelUpdate").hide();
             $("#questionbankEdit").hide();
             $("#questionbankAddCategory").show();
             $("#questionbankAddQuestions").hide();
             $("#questionbankAddQuiz").show();
             $("#questionbankRemoveElement").hide();
		}
		
		function editbtn(){ //cancel update
			 $("#SCORMAddAnswersButtonBlock").show();
	         $("#questionbankEdit").hide();
	         $("#questionbankUpdate").show();
	         $("#questionbankCancelUpdate").show();
	         $("#questionbankEditBottom").hide();
	         $("#questionbankUpdateBottom").show();
	         $("#questionbankCancelUpdateBottom").show();

	         $("#quizContentBottomMenu").show();
	         $("#questionbankAddQuiz").hide();
	         $("#questionbankAddCategory").hide();
	         $("#questionbankAddQuestions").hide();
	         $("#questionbankRemoveElement").hide();
	         $("#questionbankAddCategoryBottom").hide();
	         $("#questionbankAddQuestionsBottom").hide();
	         $("#questionbankRemoveElementBottom").hide();
	         $("#questionbankAddQuizBottom").hide();
		}
		
		
		

		//--Templates in ItemView--
		// category view
		 function categoryView(Title){
			 var result = "<div id='SCORMCategoryView'>";
			 result+="<div>";
			 result+="<div class='quizSection'>";
			 result+="<div class='quizSectionTitle'> Category: </div>";
			 result+="<div style='clear:both'></div>";
			 result+="</div>";
			 result+="<div id='SCORMCategoryNameView' class='SCORMResult'>"+Title+"</div>";
			 result+="</div>";
			 result+="<div style='clear:both'></div>";
			 result+="</div>";
			 return result;
		}
		
		//category Edit view
		function categoryEditView(Title){
		     var result = "<div id='SCORMCategoryView'>";
		     result+="<div>";
		     result+="<div class='quizSection'>";
		     result+="<div class='quizSectionTitle'> Category: </div>";
		     result+="<div style='clear:both'></div>";
		     result+="</div>";
		     result+="<input type='text' id='SCORMCategoryNameEdit' value='"+ Title +"'/>";
		     result+="</div>";
		     result+="<div style='clear:both'></div>";
		     result+="</div>";
		     return result;
		}
		
		// quiz view
		function quizView(Title,time,description){
			 var result = "<div id='SCORMQuizView'>";
			 result+=		"<div>";
			 result+=			"<div class='quizSection'>";
			 result+=				"<div class='quizSectionTitle'> Quiz: </div>";
			 result+=				"<div style='clear:both'></div>";
			 result+=			"</div>";
			 result+=			"<div id='SCORMquizNameView' class='SCORMResult'>"+Title+"</div>";
			 
			 result+=			"<div class='quizSection'>";
			 result+=				"<div class='quizSectionTitle'> Time: </div>";
			 result+=				"<div style='clear:both'></div>";
			 result+=			"</div>";
			 result+=			"<div id='SCORMquizTime' class='SCORMResult'>"+time+"</div>";
			 
			 result+=			"<div class='quizSection'>";
			 result+=				"<div class='quizSectionTitle'> Description: </div>";
			 result+=				"<div style='clear:both'></div>";
			 result+=			"</div>";
			 result+=			"<div id='SCORMquizDescription' class='SCORMResult'>"+description+"</div>";
			 result+=		"</div>";
			 result+=		"<div style='clear:both'></div>";
			 result+="</div>";
			 return result;
		}
		//quiz Edit view
		//category Edit view
		function QuizEditView(Title, time, description){
		     var result = "<div id='SCORMQuizView'>";
		     result+=			"<div>";
		     result+=				"<div class='quizSection'>";
		     result+=					"<div class='quizSectionTitle'> Quiz: </div>";
		     result+=					"<div style='clear:both'></div>";
		     result+=				"</div>";
		     result+=				"<input type='text' id='SCORMQuizNameEdit' class = 'SCORMResult' value='"+ Title +"'/>";
		     
		     result+=				"<div class='quizSection'>";
		     result+=					"<div class='quizSectionTitle'> Time: </div>";
		     result+=					"<div style='clear:both'></div>";
		     result+=				"</div>";
		     result+=				"<input type='text' id='SCORMQuizTime' class = 'SCORMResult' value='"+ time +"'/>";
		     
		     result+=				"<div class='quizSection'>";
		     result+=					"<div class='quizSectionTitle'> Description: </div>";
		     result+=					"<div style='clear:both'></div>";
		     result+=				"</div>";
		     result+=				"<textarea id = 'SCORMQuizDescription' class = 'SCORMResult'>"+ description + "</textarea>";
		     
		     result+=			"</div>";
		     result+=			"<div style='clear:both'></div>";
		     result+=		"</div>";
		     return result;
		}
		
		//question view
		function QuestionView(title,description){
			var result = "<div>";
			result+= 		"<div id='SCORMQuestionContentDiv'>";
			result+=   			"<div id='SCORMQuestionTypeDiv'>";
			result+=       	 		"<div class='quizSectionType'>Choice question</div>";
			result+=        		"<div style='clear:both'></div>";
			result+=    		"</div>";
			result+=    		"<div>";
			result+=        		"<div class='quizSection'>";
			result+=            		"<div class='quizSectionTitle'>Title</div>";
			result+=            		"<div style='clear:both'></div>";
			result+=        		"</div>";
			result+=        		"<div class='SCORMResult'>"+ title +"</div>";
			result+=    		"</div>";

			result+=    		"<div>";
			result+=        		"<div class='quizSection'>";
			result+=            		"<div class='quizSectionTitle'>Question</div>";
			result+=            		"<div style='clear:both'></div>";
			result+=        		"</div>";
			result+=        		"<div class='SCORMResult'>"+ description+"</div>";
			result+=    		"</div>";
		        
			result+=    		"<div id='SCORMQuestionAnswers' style='display: block;'>";
			result+=				"<div>";
			result+=					"<div id='SCORMQuestionAnswersEditors' class='ui-sortable ui-sortable-disabled' style=''></div>";
			result+=    			"</div>";
			result+=  			"</div>";
			result+=    		"<div style='clear:both'></div>";
			result+=		"</div>";
			result+= 	"</div>";
			return result;
		}
		
		// question edit view
		function QuestionEditView(title,description){
			var result = "<div>";
			result+= 		"<div id='SCORMQuestionContentDiv'>";
			result+=   			"<div id='SCORMQuestionTypeDiv'>";
			result+=       	 		"<div class='quizSectionType'>Question type:</div>";
			result+=        		"<select id='SCORMQuestionType'>";
			result+=					"<option value='0'>Choice question</option>";
			result+=					"<option value='1'>Short answer question</option>";
			result+=					"<option value='2'>Numeric question</option>";
			result+=					"<option value='3'>Positioning question</option>";
			result+=					"<option value='4'>Matching question</option>";
			result+=					"<option value='5'>Essay question</option>";
			result+=					"<option value='6'>Categorization question</option>";
			result+=					"<option value='7'>Plain text</option>";
			result+=				"</select>";
			result+=    		"</div>";
		    result+=    		"<div>";
			result+=        		"<div class='quizSection'>";
			result+=            		"<div class='quizSectionTitle'>Title</div>";
			result+=            		"<div style='clear:both'></div>";
			result+=        		"</div>";
			result+=        		"<input type='text' id='SCORMQuestionTitleEdit' value='"+title+"' original-title='This field is required!'>";
			result+=    		"</div>";
			result+=    		"<div>";
			result+=        		"<div class='quizSection'>";
			result+=            		"<div class='quizSectionTitle'>Question</div>";
			result+=					"<abbr title='Edit text'>";
			result+= 						"<button id='SCORMEditText' class='button24x18 buttonPen questionarieEditTextButton'></button>";
			result+= 					"</abbr>";		
			result+=            		"<div style='clear:both'></div>";
			result+=        		"</div>";	
			result+=				"<div class='SCORMResult' id='SCORMQuestionTextView'>";
			result+=    			"</div>";
		        
			result+=    		"<div id='SCORMQuestionAnswers'>";
			result+=				"<div>";
			result+=					"<div id='SCORMQuestionAnswersEditors' class='ui-sortable' style=''></div>";
			result+=					"<div class='SCORMAddNewAnswerButton' id='SCORMAddAnswersButtonBlock' style='display: block;'>";
			result+=						"<abbr style='border-bottom:0px;' title='Add new answer'>";
			result+=    						"<button id='SCORMButtonAddAnswer'>Add new answer</button>";
			result+=						"</abbr>";
			result+=					"</div>";
			result+=    			"</div>";
			result+=  			"</div>"; 
			result+=    		"<div style='clear:both'></div>";
			result+=		"</div>";
			result+= 	"</div>";
			return result;
		} 
		
		function ChoiceAnswerEditView(cid,n){
			var result = "<div id='"+cid+"' class='"+n+"'>";
			result+= "<div id='SCORMAnswer_"+cid+"' class='SCORMAnswer'>";
			result+=    "<div class='SCORMAnswerHeader'>";
			result+=        "<div class='SCORMAnswerTitle'>Answer</div>";
			result+=        "<abbr title='Remove answer'>";
			result+=            "<button id='SCORMAnswerRemove' class='button28 buttonRemove questionbankButton'></button>";
			result+=        "</abbr>";

			result+=        "<div style='clear:both'></div>";
			result+=    "</div>";
			result+=    "<div class='SCORMAnswerTextArea'>";
			result+=        "<div class='SCORMAnswerText' id='SCORMAnswerText'></div>";
			result+=        "<abbr title='Edit text'>";
			result+=            "<button id='buttonSCORMEditText' class='button24x18 buttonPen questionbankAnswerEdit'></button>";
			result+=        "</abbr>";

			result+=        "<div style='clear:both'></div>";
			result+=    "</div>";
			result+=    "<input type='checkbox' id='SCORMAnswerIsCorrect' style='cursor:default'> This is correct";
			result+= "</div>";
			result+= "</div>";
			return result;
		}
		
		function choiceAnswerView(cid,n){
			var result = "<div id='"+cid+"' class='"+n+"'>";
			result+= "<div id='SCORMAnswer_"+cid+"' class='SCORMAnswer'>";
			result+=    "<div class='SCORMAnswerHeader'>";
			result+=        "<div class='SCORMAnswerTitle'>Answer</div>";
			
			result+=        "<div style='clear:both'></div>";
			result+=    "</div>";
			result+=    "<div class='SCORMAnswerTextArea'>";
			result+=        "<div class='SCORMAnswerText' id='SCORMAnswerText'></div>";
			result+=        "<div style='clear:both'></div>";
			result+=    "</div>";
			
			result+=    "<input type='checkbox' id='SCORMAnswerIsCorrect"+cid+"' disabled='disabled'> This is correct";
			result+= "</div>";
			result+= "</div>";
			return result;
		}
		
		
		
		//function <portlet:namespace />initEditor() {
			//return "This is question";
		//}
	});
</script>
<form id="frQuestion" style="display: none;"  method="post" onsubmit="<portlet:namespace />extractCodeFromEditor()" name="<portlet:namespace />fm">

	<liferay-ui:input-editor />
	<input name="<portlet:namespace />htmlCodeFromEditorPlacedHere"
		type="hidden" value="" /> <input type="submit" value="Submit" />
</form>
<div class="SCORMTitle">Question Editor</div>
<br clear="all" />

<div id="SCORMBankWrapper">
	<div class="fluidLeftPart ui-layout-west" id="aui_3_4_0_1_820">
		<div id="SCORMQuestionBankTree"
			class="jstree jstree-0 jstree-default jstree-focused">
			<ul>
			</ul>
		</div>
	</div>

	<div class="fluidRightPart ui-layout-center" id="aui_3_4_0_1_1397">
		<div id="quizContent_">
			<div class="SCORMPackageListHeaderButtons" id="aui_3_4_0_1_1396">
				<abbr title="Remove current">
					<button id="questionbankRemoveElement"
						class="button28 questionarieTreeEditButton buttonRemove"
						style="display: none;"></button>
				</abbr> <abbr title="Add question">
					<button id="questionbankAddQuestions"
						class="button28 questionarieTreeEditButton buttonAddQuestion"
						style="display: block;"></button>
				</abbr>
				
				<abbr title="Add quiz">
					<button id="questionbankAddQuiz"
						class="button28 questionarieTreeEditButton buttonAddQuiz"
						style="display: block;"></button>
				</abbr>
				
				 <abbr title="Add category" id="aui_3_4_0_1_1453">
					<button id="questionbankAddCategory"
						class="button28 questionarieTreeEditButton buttonAddCategory"
						style="display: block;"></button>
				</abbr> <abbr title="Edit current" id="aui_3_4_0_1_1395">
					<button id="questionbankEdit"
						class="button28 questionarieTreeEditButton buttonEdit"
						style="display: none;"></button>
				</abbr> <abbr title="Save">
					<button id="questionbankUpdate" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Save</button>
				</abbr> <abbr title="Cancel" id="aui_3_4_0_1_1429">
					<button id="questionbankCancelUpdate" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Cancel</button>
				</abbr>
				<div style="clear: both"></div>
			</div>
		</div>
		<div id="ItemView">
			<b>Question base</b>
		</div>
		<div id="quizContentBottomMenu" style="display: none;">
			<div class="SCORMPackageListHeaderButtonsBottom">
				<abbr title="Remove current">
					<button id="questionbankRemoveElementBottom"
						class="button28 questionarieTreeEditButton buttonRemove"
						style="display: block;"></button>
				</abbr> <abbr title="Add question">
					<button id="questionbankAddQuestionsBottom"
						class="button28 questionarieTreeEditButton buttonAddQuestion"
						style="display: block;"></button>
				</abbr> 
				
				<abbr title="Add quiz">
					<button id="questionbankAddQuizBottom"
						class="button28 questionarieTreeEditButton buttonAddQuiz"
						style="display: block;"></button>
				</abbr>
				
				<abbr title="Add category">
					<button id="questionbankAddCategoryBottom"
						class="button28 questionarieTreeEditButton buttonAddCategory"
						style="display: block;"></button>
				</abbr> <abbr title="Edit current">
					<button id="questionbankEditBottom"
						class="button28 questionarieTreeEditButton buttonEdit"
						style="display: block;"></button>
				</abbr> <abbr title="Save">
					<button id="questionbankUpdateBottom" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Save</button>
				</abbr> <abbr title="Cancel">
					<button id="questionbankCancelUpdateBottom" class="textButton"
						style="float: right; margin: 1px 0px 0px 2px !important; display: none;">
						Cancel</button>
				</abbr>
				<div style="clear: both"></div>
			</div>
		</div>
		<div id="RichTextEdit"></div>
	</div>
	<div style="width: 100%; clear: both"></div>
</div>